<template>
  <div class='login_container'>
    <div class="building">
      <img src="../../assets/loginPic.png">
    </div>
    <div class='login_box'>
      <el-card>
        <div>
          <img src="../../assets/abc.png"
               height="210px"
               width="210px"
               style="position: absolute;top: 15%;">
        </div>
        <div>
          <h2>欢迎登录游戏官网信息管理系统</h2>
          <el-form class='login_form'
                   ref='LoginFormRef'
                   :model='loginform'
                   :rules='LoginFromRules'>
            <el-form-item prop='username'>
              <el-input prefix-icon='el-icon-user'
                        v-model='loginform.username'
                        placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop='password'>
              <el-input prefix-icon='el-icon-lock'
                        type='password'
                        v-model='loginform.password'
                        placeholder="请输入密码"
                        @keyup.enter.native="Login"></el-input>
            </el-form-item>
            <el-form-item class="btns">
              <el-button type="primary"
                         @click="Login">登录</el-button>
              <el-button type="info"
                         @click='resetLoginForm'>重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      loginform: {
        username: '',
        password: ''
      },
      LoginFromRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetLoginForm () {
      this.$refs.LoginFormRef.resetFields()
    },
    async Login () {
      this.$refs.LoginFormRef.validate(async (valid) => {
        if (!valid) {
          return
        }
        await this.$http.post('Login', this.loginform).then(res => {
          if (res.status === 200) {
            this.$message.success('欢迎您！' + res.data.username)
            window.sessionStorage.setItem('token', res.data.token)
            window.sessionStorage.setItem('user', res.data.username)
            window.sessionStorage.setItem('id', res.data.id)
            this.$router.push('/main')
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.login_container {
  width: 1920px;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
.login_box {
  width: 450px;
  height: 300px;
  border-radius: 3px;
  position: fixed;
  left: 43%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  left: 60%;
}
.el-card {
  width: 750px;
  height: 300px;
  background-color: #84c1ff;
  animation: color_change 10000ms ease-out infinite alternate;
}
h2 {
  position: absolute;
  left: 62%;
  top: 3%;
  width: 100%;
  font-size: 30px;
}
.building img {
  width: 1920px;
}
.building {
  position: fixed;
  bottom: 0;
  -webkit-filter: blur(7px);
  -moz-filter: blur(7px);
  -o-filter: blur(7px);
  -ms-filter: blur(7px);
  filter: blur(7px);
}

@keyframes color_change {
  0% {
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.6), 0 0 50px rgba(255, 0, 0, 0.4),
      0 1px 0 rgba(255, 0, 0, 0.2);
  }
  5% {
    box-shadow: 0 0 50px rgba(255, 64, 0, 0.6), 0 0 50px rgba(255, 64, 0, 0.4),
      0 1px 0 rgba(255, 64, 0, 0.2);
  }
  10% {
    box-shadow: 0 0 50px rgba(255, 128, 0, 0.6), 0 0 50px rgba(255, 128, 0, 0.4),
      0 1px 0 rgba(255, 128, 0, 0.2);
  }
  15% {
    box-shadow: 0 0 50px rgba(255, 192, 0, 0.6), 0 0 50px rgba(255, 192, 0, 0.4),
      0 1px 0 rgba(255, 192, 0, 0.2);
  }
  20% {
    box-shadow: 0 0 50px rgba(255, 255, 0, 0.6), 0 0 50px rgba(255, 255, 0, 0.4),
      0 1px 0 rgba(255, 255, 0, 0.2);
  }
  25% {
    box-shadow: 0 0 50px rgba(192, 255, 0, 0.6), 0 0 50px rgba(192, 255, 0, 0.4),
      0 1px 0 rgba(192, 255, 0, 0.2);
  }
  30% {
    box-shadow: 0 0 50px rgba(128, 255, 0, 0.6), 0 0 50px rgba(128, 255, 0, 0.4),
      0 1px 0 rgba(128, 255, 0, 0.2);
  }
  35% {
    box-shadow: 0 0 50px rgba(64, 255, 0, 0.6), 0 0 50px rgba(64, 255, 0, 0.4),
      0 1px 0 rgba(64, 255, 0, 0.2);
  }
  40% {
    box-shadow: 0 0 50px rgba(0, 255, 0, 0.6), 0 0 50px rgba(0, 255, 0, 0.4),
      0 1px 0 rgba(0, 255, 0, 0.2);
  }
  45% {
    box-shadow: 0 0 50px rgba(0, 255, 64, 0.6), 0 0 50px rgba(0, 255, 64, 0.4),
      0 1px 0 rgba(0, 255, 64, 0.2);
  }
  50% {
    box-shadow: 0 0 50px rgba(0, 255, 128, 0.6), 0 0 50px rgba(0, 255, 128, 0.4),
      0 1px 0 rgba(0, 255, 128, 0.2);
  }
  55% {
    box-shadow: 0 0 50px rgba(0, 255, 192, 0.6), 0 0 50px rgba(0, 255, 192, 0.4),
      0 1px 0 rgba(0, 255, 192, 0.2);
  }
  60% {
    box-shadow: 0 0 50px rgba(0, 255, 255, 0.6), 0 0 50px rgba(0, 255, 255, 0.4),
      0 1px 0 rgba(0, 255, 255, 0.2);
  }
  65% {
    box-shadow: 0 0 50px rgba(0, 192, 255, 0.6), 0 0 50px rgba(0, 192, 255, 0.4),
      0 1px 0 rgba(0, 192, 255, 0.2);
  }
  70% {
    box-shadow: 0 0 50px rgba(0, 128, 255, 0.6), 0 0 50px rgba(0, 128, 255, 0.4),
      0 1px 0 rgba(0, 128, 255, 0.2);
  }
  75% {
    box-shadow: 0 0 50px rgba(0, 64, 255, 0.6), 0 0 50px rgba(0, 64, 255, 0.4),
      0 1px 0 rgba(0, 64, 255, 0.2);
  }
  80% {
    box-shadow: 0 0 50px rgba(0, 0, 255, 0.6), 0 0 50px rgba(0, 0, 255, 0.4),
      0 1px 0 rgba(0, 0, 255, 0.2);
  }
  85% {
    box-shadow: 0 0 50px rgba(0, 0, 192, 0.6), 0 0 50px rgba(0, 0, 192, 0.4),
      0 1px 0 rgba(0, 0, 192, 0.2);
  }
  90% {
    box-shadow: 0 0 50px rgba(0, 0, 128, 0.6), 0 0 50px rgba(0, 0, 128, 0.4),
      0 1px 0 rgba(0, 0, 128, 0.2);
  }
  95% {
    box-shadow: 0 0 50px rgba(0, 0, 64, 0.6), 0 0 50px rgba(0, 0, 64, 0.4),
      0 1px 0 rgba(0, 0, 64, 0.2);
  }
  100% {
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.6), 0 0 50px rgba(0, 0, 0, 0.4),
      0 1px 0 rgba(0, 0, 0, 0.2);
  }
}
</style>
